<template>
  <div class="logic-range-conditions-dialog">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content fw-600">数据源</div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content fw-600">数据范围</div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content fw-600">成立条件</div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content fw-600">触发节点</div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content fw-600"></div>
      </el-col>
    </el-row>
    <el-row
        :gutter="20"
        class="logic-range-conditions-row"
        v-for="(item,index) in LogicRangeConditions.NodeLogic.Ranges"
        :key="index"
    >
      <!--      数据源-->
      <el-col :span="7">
        <div class="grid-content fw-600">
          <data-source-input
              :datasource-item="item"
              :node-id="item.DataSourceId"
              :param-name="item.ParamName"
              null-message="请选择数据来源（不能为空）"
              @change="onDataSourceChange($event,index)"
              style="width: 100%;"
          />
        </div>
      </el-col>
      <!--      数据范围-->
      <el-col :span="7">
        <div class="grid-content fw-600 lrcr-min-max">
          <el-input v-model="item.Min" clearable type="number" size="mini" placeholder="最小值">
          </el-input>
          <el-icon style="margin: 0 3px">
            <Minus/>
          </el-icon>
          <el-input v-model="item.Max" clearable type="number" size="mini" placeholder="最大值">
          </el-input>
        </div>
      </el-col>
      <!--        成立条件-->
      <el-col :span="3">
        <div class="grid-content fw-600">
          <el-select
              placeholder=""
              v-model="item.Established"
              size="mini"
              clearable
          >
            <el-option
                v-for="item in established"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
      <!--        触发节点-->
      <el-col :span="5">
        <div class="grid-content fw-600">
          <el-select
              placeholder=""
              v-model="item.TriggerNodeId"
              @change="onTriggerChange(index)"
              size="mini"
              clearable
          >
            <el-option
                v-for="item in triggerNodes"
                :key="item.id"
                :label="item.id+' '+item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content">
          <el-button
              icon="Delete"
              @click.prevent="deleteConditionParam(index)"
              type="warning"
              size="small"
              circle
          ></el-button>
        </div>
      </el-col>
    </el-row>
    <div style="display: flex;justify-content: end;margin-right: 19px;">
      <el-button
          class="m-top-10 m-bottom-10"
          icon="Plus"
          @click.prevent="addConditionParam"
          type="success"
          size="small"
          circle
      ></el-button>
    </div>
    <el-form
        class="demo-form-inline"
        size="mini"
        label-width="100px"
        label-position="left"
    >
      <el-form-item label="描述">
        <el-input
            v-model="LogicRangeConditions.Desc"
            type="textarea"
            :rows="3"
            placeholder="描述"
            style="width: 90%"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi'
import Utils from '../../../../utils/Common'
import NodeConfigMixin from '../../../../libs/NodeConfigMixin'
import DataSourceInput from '../../components/NodeInputSourceDataComponent.vue'

export default {
  name: 'LogicRangeConditionsDialog',
  mixins: [NodeConfigMixin],
  components: { DataSourceInput },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      established: ['OK', 'NG'],
      triggerNodes: [{ name: null, id: null }],
      DataType: ['', 'NUMBER', 'TEXT'],
      LogicRangeConditions: {
        NodeLogic: {
          Ranges: [{
            ParamName: null,
            DataSource: null,
            DataSourceId: null,
            Min: 1,
            Max: 1000,
            Established: null,
            TriggerNodeText: null,
            TriggerNodeId: null
          }]
        },
        Desc: null
      }
    }
  },
  methods: {
    ShowNodeData () {
      const _node = Object.assign({}, this.currentClickNodeMixin)
      this.SetFormValue(_node)
    },
    /**
     * 表单回显功能
     * @param _node
     * @constructor
     */
    SetFormValue (_node) {
      if (Utils.IsEmpty(_node.Children)) {
        _node.Children = []
      }
      this.triggerNodes = _node.Children.sort((a, b) => {
        return a.id - b.id
      })
      if (!Utils.IsEmpty(_node?.nodeInputParam?.NodeLogic)) {
        this.LogicRangeConditions = _node.nodeInputParam
      }
    },
    /**
     * 添加入参
     * @param item
     * @param index
     */
    addConditionParam (item, index) {
      this.LogicRangeConditions.NodeLogic.Ranges.push({
        ParamName: null,
        DataSource: null,
        DataSourceId: null,
        Min: 1,
        Max: 1000,
        Established: null,
        TriggerNodeId: null
      })
    },
    /**
     * 删除入参
     * @param index
     */
    deleteConditionParam (index) {
      this.LogicRangeConditions.NodeLogic.Ranges.splice(index, 1)
    },
    /**
     * 选中的值
     * @param dt
     * @param index
     */
    onDataSourceChange (dt, index) {
      const Range = this.LogicRangeConditions.NodeLogic.Ranges[index]
      if (!Utils.IsEmpty(dt.ParamName)) {
        Range.DataSourceId = dt.nodeId
        Range.ParamName = dt.ParamName
        Range.DataSource = dt.DataSource
      }
    },
    /**
     * 保存节点数据
     */
    _SaveNode (NodeName) {
      const _Range = Object.assign({}, this.LogicRangeConditions)
      const params = {
        NodeLogic: {
          Ranges: []
        },
        Desc: _Range.Desc
      }
      let vai = true
      const Items = Object.assign([], _Range.NodeLogic.Ranges)

      Items.forEach((r) => {
        const _item = Object.assign({}, r)
        if (vai && (Utils.IsEmpty(_item.ParamName) || _item.ParamName <= 0)) {
          Utils.MessageWarning('请选择数据源')
          vai = false
        }
        if (vai && (Utils.IsEmpty(_item.Min) || Utils.IsEmpty(_item.Max))) {
          Utils.MessageWarning('请输入范围')
          vai = false
        }
        if (vai && _item.Min > _item.Max) {
          Utils.MessageWarning('请输入正确的范围，最大值不能小于最小值')
          vai = false
        }
        if (vai && Utils.IsEmpty(_item.Established)) {
          Utils.MessageWarning('请选择成立条件')
          vai = false
        }
        if (vai && (Utils.IsEmpty(_item.TriggerNodeId) || _item.TriggerNodeId <= 0)) {
          Utils.MessageWarning('请选择触发节点')
          vai = false
        }
        const ParamName = Utils.replaceAll(_item.ParamName, _item.DataSourceId, '')
        _item.ParamName = ParamName.trim()
        if (Utils.IsEmpty(_item.TriggerNodeId)) {
          _item.TriggerNodeId = 0
        }
        params.NodeLogic.Ranges.push(_item)
      })
      if (vai) {
        new FlowNodeDataApi().Install(this.currentClickNodeMixin.id, params, NodeName)
      }
    }
  },
  mounted () {
    this.ShowNodeData()
  }
}
</script>

<style lang="less" scoped>
.logic-range-conditions-dialog {

  .logic-range-conditions-row {
    display: flex;
    align-items: center;
    cursor: pointer;

    .lrcr-min-max {
      display: flex;
      align-items: center;
    }
  }

  .grid-content {
    padding-top: 10px;
    display: flex;
  }

  .el-dialog__body {
    padding-top: 20px;
  }

  .el-dialog__header {
    background-color: #545c64;
    padding: 20px 10px;

    .el-dialog__title {
      color: #ffffff;
    }
  }
}
</style>
